<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Document</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      #container li {
        text-align: center;
        background-color: #eee;
        margin-bottom: 1px;
        padding: 20px 10px;
      }

      .refreshText {
        position: absolute;
        width: 100%;
        line-height: 50px;
        height: 50px;
        text-align: center;
        /* background-color: skyblue; */
        left: 0;
        top: 0;
        transform: translateY(-50px);
      }
    </style>
  </head>

  <body>
    <main class="parent">
      <p class="refreshText"></p>
      <ul id="container">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
        <li>555</li>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
      </ul>
    </main>
    <script type="text/javascript">
      window.onload = function () {
        //1.获取到列表的dom，刷新显示部分的dom，列表父容器的dom
        let container = document.querySelector('#container')
        let refreshText = document.querySelector('.refreshText')
        let parent = document.querySelector('.parent')
        let lastMoveY = 0
        let startY = 0 // 记录手指触摸最开始的Y坐标
        let isRefresh = false

        //3.给列表dom监听touchstart事件,得到起始位置的Y坐标
        parent.addEventListener('touchstart', function (e) {
          console.log('touchstart')
          startY = e.touches[0].pageY
        })

        //4.当移动到一定程度需要显示上面的文字
        parent.addEventListener('touchmove', function (e) {
          console.log('touchmove')
          parent.style.transition = 'all ease 0.3s' // ease 缓慢
          parent.style.transform = 'translateY(100px)'
          if (isTop() && lastMoveY > e.touches[0].pageY) {
            // 往上移动提示
            refreshText.innerHTML = '下拉即可刷新...'
            isRefresh = false
            return
          }
          lastMoveY = e.touches[0].pageY
          // 在顶部下拉且往下移动的距离大于startY，说明用户开始下拉了

          if (isTop() && e.touches[0].pageY - startY > 0) {
            isRefresh = true
            refreshText.innerHTML = '释放立即刷新...' // 换成gif也ok
          }
        })

        //5.此时说明用户已经松开了手指，可以进行异步操作了
        parent.addEventListener('touchend', function (e) {
          console.log('touchend')
          if (isRefresh) {
            refreshText.innerHTML = 'loading...'
            setTimeout(function () {
              parent.style.transform = 'translateY(0)'
              console.log('成功刷新')
            }, 1000)
          } else {
            parent.style.transform = 'translateY(0)'
            console.log('取消刷新')
          }
          // 归位
          isRefresh = false
          lastMoveY = 0
        })

        // 是否在顶部，scrollTop == 0
        function isTop() {
          let t = document.documentElement.scrollTop || document.body.scrollTop
          return t === 0 ? true : false
        }
      }
    </script>
  </body>
</html>
